$(function() {
	load();

	// title 添加操作
	$('#title').on('keydown', function(event) {
		if (event.keyCode === 13) {
			if ($(this).val() !== '') {
				// 首先读取本地数据
				var local = getData();
				// console.log(local);
				// 把local数据进行更新数据，把最新的数据追加给loca数据
				local.push({
					title: $(this).val(),
					done: false
				})
				savaDate(local)
				// todoList本地存储数据渲染加载到页面
				load();
				$(this).val('')
			}
		}
	})

	// todolist 删除操作
	$('#todolist,#donelist').on('click', 'a', function() {
		// alert(111)
		// 首先读取本地数据
		var data = getData();
		// console.log(data)
		// 修改数据
		var index = $(this).attr('id') //获取点击的id
		// console.log(index)
		data.splice(index, 1)
		// 保存到本地
		savaDate(data);
		// 重新渲染页面
		load();
	})

	// 正在进行或者已经完成的事项
	$('#todolist,#donelist').on('click', 'input', function() {
		// 1.获得本地数据
		var data = getData();
		// 2.修改数据
		var index = $(this).siblings('a').attr('id')
		// console.log(index)
		data[index].done = $(this).prop('checked')
		// 保存到本地数据
		savaDate(data);
		// 渲染页面
		load()

	})


	// 读取本地存储数据
	function getData() {
		var data = localStorage.getItem('todoList')
		// 判断本地是否有数据
		if (data !== null) {
			//本地存储的是字符串的数据格式 而我们需要的是数组对象(JSON.parse())
			return JSON.parse(data)
		} else {
			return [];
		}
	}
	//保存本地存储数据
	function savaDate(data) {
		localStorage.setItem('todoList', JSON.stringify(data))
	}


	//本地数据渲染加载到页面
	function load() {
		var data = getData();
		// 遍历之前清空 ul 	ol的内容
		$('#todolist ,#donelist').empty();
		var todocount = 0;
		var donecount = 0;
		$.each(data, function(index, item) {
			if (item.done) {
				$('#donelist').prepend(
					"<li><input type='checkbox' checked = 'checked'><p>" + item.title +
					"</p><a href='javascript:;'  id=" + index + "></a></li>")
				donecount++
			} else {
				$('#todolist').prepend(
					"<li><input type='checkbox' ><p>" + item.title +
					"</p><a href='javascript:;'  id=" + index + "></a></li>")
				todocount++
			}

		})
		$('#todocount').text(todocount)
		$('#donecount').text(donecount)
	}
})
